<template>
  <div class="common-layout">
    <el-container v-if="isAuthenticated" style="height: 100vh;">
      <el-header class="header">
        <router-link to="/" class="title-link">
          <h2>NEU智能投顾系统</h2>
        </router-link>
        <div class="user-info" v-if="user">
          <span>欢迎, {{ user.realName }}</span>
          <el-button type="danger" size="small"  round @click="handleLogout">
            <el-icon><TopLeft /></el-icon>
            登出</el-button>
        </div>
      </el-header>

      <el-container>
        <NavBar />
        <el-main class="main-content">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>

    <router-view v-else></router-view>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { useAuthStore } from '@/store/auth';
import NavBar from './components/NavBar.vue';
import { ElMessage } from 'element-plus';
import { TopLeft} from '@element-plus/icons-vue'

const authStore = useAuthStore();

// 计算属性，判断用户是否已认证
const isAuthenticated = computed(() => !!authStore.state.user);
// 获取当前用户信息
const user = computed(() => authStore.state.user);

const handleLogout = () => {
  authStore.logout();
  ElMessage.success('您已成功登出');
  // 使用 window.location.href 以确保所有状态都得到清理
  window.location.href = '/login';
};
</script>

<style scoped>
.common-layout,
.el-container {
  height: 100%;
}

.header {
  background-color: #409EFF;
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.title-link {
  text-decoration: none;
  color: inherit; /* 继承父元素 .header 的颜色 */
}

.user-info {
  display: flex;
  align-items: center;
}

.user-info span {
  margin-right: 15px;
}

.user-info .el-button {
  color: #fff;
}

.main-content {
  background-color: #f4f4f5;
  padding: 20px;
}
</style>